<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="./index.css">
  <title>Vue 3 Composition API</title>
  <!-- 添加 Import Maps -->
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js"
      }
    }
  </script>
</head>

<body>
  <!-- 挂载点 -->
  <div id="app">
    <div ref="containerRef" class="panel">
      <div :class="['left', { inDrag: isMoving }]">我是左侧内容</div>
      <div ref="dragLineRef" :class="['drag-line', { isMoving }]"></div>
      <div :class="['right', { inDrag: isMoving}]"
        :style="`width: ${rightWidth}px;`">
        我是右侧内容
      </div>
    </div>
  </div>

  <script type="module">
    // 使用 ES 模块导入
    import { createApp, ref } from "vue";
    import { useDragWidth } from "./useDrag.js";

    const app = createApp({
      setup() {
        const dragLineRef = ref()
        const containerRef = ref()

        const { rightWidth, isMoving } = useDragWidth({ containerRef, dragLineRef })
        return {
          dragLineRef,
          containerRef,
          rightWidth,
          isMoving
        }
      },
    }).mount("#app");
  </script>

</html>